<template>
    <div id="main1" style="width:1680px; height: 800px"></div>
</template>

<script>
    const echarts = require("echarts")
export default {
  name: "ArticleData",
    data() {
      return {
          data1: [],
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      initData() {
          this.requested = true;
          this.$http.get('/zhengzhi/data').then(resp => {

              const data = resp.data.data;

              let datas = []
              data.forEach((value, index) => {
                  datas.push({
                      value: value.count,
                      name: value.name
                  })
              })


              // 动态数据
              this.data1 = datas;
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main1'));
              // 绘制图表
              myChart.setOption({
                  title : {
                      text: '文章标签数据',
                      subtext: 'By: 掌上天空',
                      left: 'center'
                  },
                  tooltip : {
                      trigger: 'item',
                      formatter: "{b}: {c}条记录"
                  },
                  legend: {
                      type: 'scroll',
                      orient: 'vertical',
                      right: 10,
                      top: 20,
                      bottom: 20,
                      data: this.data1,
                      selected: this.data1
                  },
                  series : [
                      {
                          name: '标签数据',
                          type: 'pie',
                          radius : '55%',
                          center: ['40%', '50%'],
                          data: this.data1,
                          itemStyle: {
                              emphasis: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                              }
                          }
                      }
                  ]
              });
          }).finally(() => {
              this.requested = false;
          });
      }
    }
}
</script>

<style scoped>

</style>
